先寫 API 文件。

可以使用mockAPI的服務取得一組 user 的 API。

因應需求寫的 API 文件

GET /user

response 200

{
  "data": [
    {
      "createdAt": "2021-09-28T06:15:33.861Z",
      "name": "chris",
      "avatar": "https://fakeimg.pl/300/",
      "id": "1"
    },
    {
      "createdAt": "2021-09-28T08:06:09.227Z",
      "name": "Elizabeth Shields",
      "avatar": "https://cdn.fakercloud.com/avatars/russoedu_128.jpg",
      "id": "2"
    },
    {
      "createdAt": "2021-09-27T16:50:44.188Z",
      "name": "Everett Stokes",
      "avatar": "https://cdn.fakercloud.com/avatars/bobwassermann_128.jpg",
      "id": "3"
    }
  ]
}

GET /user/:id

response 200

{
  "data": {
    "createdAt": "2021-09-28T06:15:33.861Z",
    "name": "chris",
    "avatar": "https://fakeimg.pl/300/",
    "id": "1"
  }
}

POST /user

request body

{
  "name": "chris",
  "avatar": "https://fakeimg.pl/300/"
}

response 200

{
  "data": {
    "createdAt": "2021-09-28T01:16:41.617Z",
    "name": "chris",
    "avatar": "https://fakeimg.pl/300/",
    "id": "4"
  }
}

PUT /user/:id

request body

{
  "name": "chris",
  "avatar": "https://fakeimg.pl/300/"
}

response 200

{
  "data": {
    "createdAt": "2021-09-28T06:15:33.861Z",
    "name": "chris",
    "avatar": "https://fakeimg.pl/300/",
    "id": "1"
  }
}

DELETE /user/:id

response 200

{
  "data": {
    "createdAt": "2021-09-28T06:15:33.861Z",
    "name": "chris",
    "avatar": "https://fakeimg.pl/300/",
    "id": "1"
  }
}

用 actions 寫 API 文件實作

前幾天的 Vuex使用偏好 有說 action 可以寫非同步行為，還有它的命名規則。在此就利用這些原則，配合上一篇的基礎建設，在這裡「將 API 文件寫成程式碼」，成為「程式碼可以自我文件化」的一種體現。

@/store/actions.js

import backendAPI from '@/utility/backendAPI.js'

export default {
    async fetchUser ({ commit }, id) {
      const res = await backendAPI.GET(`/user/${id}`)
      commit('user', res.data)
    },
    async fetchUsers ({ commit }, id) {
      const res = await backendAPI.GET(`/user`)
      commit('users', res.data)
    },
    async createUser ({ commit }, { id, name, phone }) {
      await backendAPI.POST(`/user`, {
        name,
        avatar
      })
    },
    async updateUser ({ commit }, { id, name, phone }) {
      await backendAPI.PUT(`/user/${id}`, {
        name,
        avatar
      })
    },
    async deleteUser ({ commit }, id) {
      await backendAPI.DELETE(`/user/${id}`)
    },
  }

其中，這些部份，就如同你的 API Doc 在除錯的時候，可以直接搜尋 path 並且對一下 method 和 param 有沒有給錯。這裡和 API Doc 一樣，API 會給錯，都是 component 的問題了。

backendAPI.GET(`/user/${id}`)
backendAPI.GET(`/user`)
backendAPI.POST(`/user`, {
  name,
  avatar
})
backendAPI.PUT(`/user/${id}`, {
  name,
  avatar
})
backendAPI.DELETE(`/user/${id}`)

為了瀏覽器的 Network 固定在 action 取得

為了讓在這裡的 res (在 fetchUser、fetchUsers 有宣告) 就如同下圖的樣子，所以需要前一篇的處理 API 層次感之地基篇，讓 response 吐出來的樣子，和瀏覽器的 Network 看到的一樣。

再看一下 Vuex 的圖

目前我們實作了下面這一個部份

接下來，慢慢的將 Vuex 把這些東西都做好。